<template>
    <div id="person">
        <div v-if="openTimes==100?true:false" class="open">
            <div v-if="getNumber" class="center">
                <ul class="nav">
                    <li data-id="1" class="curLi">二字定</li>
                    <li data-id="2">三字定</li>
                    <li data-id="3">四字定</li>
                    <li data-id="4">二字现</li>
                    <li data-id="5">三字现</li>
                    <li data-id="6">四字现</li>
                </ul>
                <div class="choose">
                    <!-- 定与配 -->
                    <div class="choose-one">
                        <div>
                            <div id="ding">
                                <span class="color2">定位置</span>
                                <input
                                    id="one-first"
                                    data-id="1"
                                    checked
                                    type="radio"
                                    name="one-all"
                                    value="取"
                                />
                                <span>取</span>
                                <input
                                    id="one-second"
                                    data-id="2"
                                    type="radio"
                                    name="one-all"
                                    value="除"
                                />
                                <span>除</span>
                            </div>
                            <div>
                                <span class="color2">配数全转</span>
                                <input
                                    id="one-third"
                                    data-id="3"
                                    type="radio"
                                    name="one-all"
                                    value="取"
                                />
                                <span>取</span>
                                <input
                                    id="one-fourth"
                                    data-id="4"
                                    type="radio"
                                    name="one-all"
                                    value="除"
                                />
                                <span>除</span>
                            </div>
                        </div>
                        <ul class="one-all-first">
                            <li>
                                <span>万</span>
                                <br />
                                <input id="w" type="number" @click="inputRule('#w')" />
                            </li>
                            <li>
                                <span>千</span>
                                <br />
                                <input id="q" type="number" @click="inputRule('#q')" name />
                            </li>
                            <li>
                                <span>百</span>
                                <br />
                                <input id="b" type="number" @click="inputRule('#b')" name />
                            </li>
                            <li>
                                <span>十</span>
                                <br />
                                <input id="s" type="number" @click="inputRule('#s')" name />
                            </li>
                            <li>
                                <span>个</span>
                                <br />
                                <input id="g" type="number" @click="inputRule('#g')" name />
                            </li>
                        </ul>
                        <ul class="one-all-second">
                            <input id="area-one" @click="inputRule('#area-one')" type="number" />
                            <input id="area-two" @click="inputRule('#area-two')" type="number" />
                            <input id="area-three" @click="inputRule('#area-two')" type="number" />
                            <input id="area-four" @click="inputRule('#area-two')" type="number" />
                        </ul>
                    </div>
                    <!-- 合分 -->
                    <div class="choose-two">
                        <div>
                            <span class="color2">合分</span>
                            <input name="all-two" type="radio" />
                            <span>取</span>
                            <input name="all-two" type="radio" />
                            <span>除</span>
                        </div>
                        <ul class="inputs">
                            <li>
                                <p>
                                    <span class="nums">1</span>
                                    <input data-id="1" name="all-two-child" type="checkbox" />
                                    <input data-id="2" name="all-two-child" type="checkbox" />
                                    <input data-id="3" name="all-two-child" type="checkbox" />
                                    <input data-id="4" name="all-two-child" type="checkbox" />
                                    <input data-id="5" name="all-two-child" type="checkbox" />
                                </p>
                                <input
                                    id="two-first"
                                    name="two-input"
                                    type="number"
                                    @click="inputRule('#w')"
                                />
                            </li>
                            <li>
                                <p>
                                    <span class="nums">2</span>
                                    <input data-id="1" name="all-two-child" type="checkbox" />
                                    <input data-id="2" name="all-two-child" type="checkbox" />
                                    <input data-id="3" name="all-two-child" type="checkbox" />
                                    <input data-id="4" name="all-two-child" type="checkbox" />
                                    <input data-id="5" name="all-two-child" type="checkbox" />
                                </p>
                                <input
                                    id="two-second"
                                    name="two-input"
                                    type="number"
                                    @click="inputRule('#w')"
                                />
                            </li>
                            <li>
                                <p>
                                    <span class="nums">3</span>
                                    <input data-id="1" name="all-two-child" type="checkbox" />
                                    <input data-id="2" name="all-two-child" type="checkbox" />
                                    <input data-id="3" name="all-two-child" type="checkbox" />
                                    <input data-id="4" name="all-two-child" type="checkbox" />
                                    <input data-id="5" name="all-two-child" type="checkbox" />
                                </p>
                                <input
                                    id="two-third"
                                    name="two-input"
                                    type="number"
                                    @click="inputRule('#w')"
                                />
                            </li>
                            <li>
                                <p>
                                    <span class="nums">4</span>
                                    <input data-id="1" name="all-two-child" type="checkbox" />
                                    <input data-id="2" name="all-two-child" type="checkbox" />
                                    <input data-id="3" name="all-two-child" type="checkbox" />
                                    <input data-id="4" name="all-two-child" type="checkbox" />
                                    <input data-id="5" name="all-two-child" type="checkbox" />
                                </p>
                                <input
                                    id="two-fourth"
                                    name="two-input"
                                    type="number"
                                    @click="inputRule('#w')"
                                />
                            </li>
                            <li>
                                <p>
                                    <span class="nums">5</span>
                                    <input data-id="1" name="all-two-child" type="checkbox" />
                                    <input data-id="2" name="all-two-child" type="checkbox" />
                                    <input data-id="3" name="all-two-child" type="checkbox" />
                                    <input data-id="4" name="all-two-child" type="checkbox" />
                                    <input data-id="5" name="all-two-child" type="checkbox" />
                                </p>
                                <input
                                    id="two-fifth"
                                    name="two-input"
                                    type="number"
                                    @click="inputRule('#w')"
                                />
                            </li>
                        </ul>
                    </div>
                    <!-- 不定位合分 -->
                    <div class="choose-three">
                        <ul>
                            <li class="color2">不定位合分</li>
                            <li>
                                <div class="noDing-one">
                                    <input
                                        id="noDing-one"
                                        name="all-three"
                                        data-id="1"
                                        type="radio"
                                        checked
                                    />
                                    <span>两数合</span>
                                </div>
                                <div class="noDing-two">
                                    <input
                                        id="noDing-two"
                                        name="all-three"
                                        data-id="2"
                                        type="radio"
                                    />
                                    <span>三数合</span>
                                </div>
                                <div class="noDing-three">
                                    <input
                                        id="noDing-three"
                                        name="all-three"
                                        data-id="3"
                                        type="radio"
                                    />
                                    <span>四数合</span>
                                </div>
                            </li>
                            <li>
                                <input
                                    id="noDing-inputs"
                                    type="number"
                                    @click="inputRule('#noDing-inputs')"
                                />
                            </li>
                        </ul>
                    </div>
                    <!-- 多重 -->
                    <div class="choose-four">
                        <div class="noDing-one">
                            <input
                                id="four-first"
                                data-id="1"
                                type="checkbox"
                                name="four-all"
                                value="取"
                            />
                            <span>取</span>
                            <input
                                id="four-second"
                                data-id="2"
                                type="checkbox"
                                name="four-all"
                                value="除"
                            />
                            <span>除</span>
                            <span class="color2">(双重)</span>
                        </div>
                        <div class="noDing-three">
                            <input
                                id="four-third"
                                data-id="3"
                                type="checkbox"
                                name="four-all"
                                value="取"
                            />
                            <span>取</span>
                            <input
                                id="four-fourth"
                                data-id="4"
                                type="checkbox"
                                name="four-all"
                                value="除"
                            />
                            <span>除</span>
                            <span class="color2">(双双重)</span>
                        </div>
                        <div class="noDing-two">
                            <input
                                id="four-fifth"
                                data-id="5"
                                type="checkbox"
                                name="four-all"
                                value="取"
                            />
                            <span>取</span>
                            <input
                                id="four-sixth"
                                data-id="6"
                                type="checkbox"
                                name="four-all"
                                value="除"
                            />
                            <span>除</span>
                            <span class="color2">(三重)</span>
                        </div>
                        <div class="noDing-three">
                            <input
                                id="four-seventh"
                                data-id="7"
                                type="checkbox"
                                name="four-all"
                                value="取"
                            />
                            <span>取</span>
                            <input
                                id="four-eighth"
                                data-id="8"
                                type="checkbox"
                                name="four-all"
                                value="除"
                            />
                            <span>除</span>
                            <span class="color2">(四重)</span>
                        </div>
                    </div>
                    <!-- 兄弟 -->
                    <div class="choose-four">
                        <div class="noDing-one">
                            <input
                                id="five-first"
                                data-id="1"
                                type="checkbox"
                                name="five-all"
                                value="取"
                            />
                            <span>取</span>
                            <input
                                id="five-second"
                                data-id="2"
                                type="checkbox"
                                name="five-all"
                                value="除"
                            />
                            <span>除</span>
                            <span class="color2">(二兄弟)</span>
                        </div>
                        <div class="noDing-two">
                            <input
                                id="five-third"
                                data-id="3"
                                type="checkbox"
                                name="five-all"
                                value="取"
                            />
                            <span>取</span>
                            <input
                                id="five-fourth"
                                data-id="4"
                                type="checkbox"
                                name="five-all"
                                value="除"
                            />
                            <span>除</span>
                            <span class="color2">(三兄弟)</span>
                        </div>
                        <div class="noDing-three">
                            <input
                                id="five-fifth"
                                data-id="5"
                                type="checkbox"
                                name="five-all"
                                value="取"
                            />
                            <span>取</span>
                            <input
                                id="five-sixth"
                                data-id="6"
                                type="checkbox"
                                name="five-all"
                                value="除"
                            />
                            <span>除</span>
                            <span class="color2">(四兄弟)</span>
                        </div>
                    </div>
                    <!-- 对数 -->
                    <div class="choose-five">
                        <input id="six-first" data-id="1" type="checkbox" name="six-all" value="取" />
                        <span>取</span>
                        <input id="six-second" data-id="2" type="checkbox" name="six-all" value="除" />
                        <span>除</span>
                        <span class="color2">(对数)</span>
                        <input id="six-one" type="number" @click="inputRule('#six-one')" />
                        <input id="six-two" type="number" @click="inputRule('#six-two')" />
                        <input id="six-three" type="number" @click="inputRule('#six-three')" />
                    </div>
                    <!-- 单双 -->
                    <div class="choose-six">
                        <div>
                            <input
                                id="seven1-first"
                                data-id="1"
                                type="checkbox"
                                name="seven1-all"
                                value="取"
                            />
                            <span>取</span>
                            <input
                                id="seven1-second"
                                data-id="2"
                                type="checkbox"
                                name="seven1-all"
                                value="除"
                            />
                            <span>除</span>
                            <span class="color2">(单)</span>
                            <input id="seven1-one" data-id="1" type="checkbox" value />
                            <input id="seven1-two" data-id="2" type="checkbox" value />
                            <input id="seven1-three" data-id="3" type="checkbox" value />
                            <input id="seven1-four" data-id="4" type="checkbox" value />
                            <input id="seven1-five" data-id="5" type="checkbox" value />
                        </div>
                        <div>
                            <input
                                id="seven2-first"
                                data-id="1"
                                type="checkbox"
                                name="seven2-all"
                                value="取"
                            />
                            <span>取</span>
                            <input
                                id="seven2-second"
                                data-id="2"
                                type="checkbox"
                                name="seven2-all"
                                value="除"
                            />
                            <span>除</span>
                            <span class="color2">(双)</span>
                            <input id="seven2-one" data-id="1" type="checkbox" value />
                            <input id="seven2-two" data-id="2" type="checkbox" value />
                            <input id="seven2-three" data-id="3" type="checkbox" value />
                            <input id="seven2-four" data-id="4" type="checkbox" value />
                            <input id="seven2-five" data-id="5" type="checkbox" value />
                        </div>
                    </div>
                </div>
                <!-- ----- -->
                <div class="btnType">
                    <mt-button @click="sub" size="small" type="primary" class="btn">提交</mt-button>
                    <mt-button size="small" type="danger" @click="clear" class="clear">清除</mt-button>
                </div>
                <p class="number-title">生成号码框</p>
                <ul class="announce-result">
                    <!-- TODO -->
                </ul>
                <P class="amount">
                    笔数：
                    <span class="allaNum">0</span>
                </P>
            </div>
            <el-input class="money" size="small" v-model="money" placeholder="请输入金额"></el-input>
            <mt-button @click="payOrder" style="width:100%" size="small" type="primary">下注</mt-button>
        </div>
        <div v-if="openTimes<90?true:false" class="close">
            <span>已封盘</span>
            <br />
            <span v-if="openTimes>0?true:false">{{openTimes}}</span>
        </div>
    </div>
</template>

<script>
import { mapState } from "Vuex";
import { select } from "../assets/js/select";
export default {
    name: "person",
    data() {
        return {
            getNumber: true, //清除
            number: "",
            money: ""
        };
    },
    computed: {
        ...mapState(["saveType", "user","showType", "openTimes","curMsg"])
    },

    mounted() {
        select.nav();
        select.dingAndPei();
        select.bdwClick();
        select.cClick();
        select.xdClick();
        select.dsClick();
        select.dansClick();
    },
    methods: {
        sub() {
            this.number = select.submit();
            console.log(this.number.length);
            // var list = select.submit()
            // var params = {
            //     num:""
            // }
            // list.forEach(item=>{
            //     params.num = item
            //     this.number.push(params)
            // })
        },
        payOrder() {
            var params = {
                module: this.saveType,
                amount: this.money,
                items: this.number
            };
            // this.$message({
            //     message: "下注成功！"
            // });
            this.$api.post(this.$url.orderBuy, params, res => {
                console.log(res.data);
                if (res.data.code == 200) {
                    this.user.balance =
                    this.user.balance - this.number.length * this.money;
                    this.$store.commit('getUser',JSON.stringify(this.user))
                    alert("下注成功!");
                    this.number= ""
                    $('.announce-result').html("")
                    $('.allaNum').text(0)
                    this.money= ""
                }
            });
        },
        clear() {
            this.getNumber = false;
            this.$nextTick(() => {
                this.getNumber = true;
                select();
            });
        },
        inputRule(name) {
            var baseNum = "0123456789";
            $(name).bind("input propertychange", function() {
                var content = $(name)
                    .val()
                    .toString();
                var contentArr = content.split("");
                var set = new Set(contentArr);
                var newContentArr = Array.from(set);
                $(name).val(newContentArr.join(",").replace(/,/g, ""));
                if (
                    $(name)
                        .val()
                        .indexOf(".") >= 0
                ) {
                    $(name).val("");
                }
            });
        }
    }
};
</script>

<style lang='less' scoped>
html,
body {
    height: 100%;
    background-color: #fff;
}
li,
ul,
input {
    margin: 0;
    padding: 0;
    list-style: none;
}
@color: #f39393;
@color2: #e6a23c;
.color2 {
    color: @color2;
}
.color {
    color: @color;
}
#person {
    padding: 0 10px 10px;
    box-sizing: border-box;
}
.money {
    margin-bottom: 10px;
}
//快选nav
.curLi {
    background-color: @color;
    color: #fff;
}
// _____________________
.nums {
    font-size: 18px;
}
.center {
    padding: 0.2rem;
    box-sizing: border-box;
    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.3rem;
        border-bottom: 2px solid @color;
        li {
            padding: 0.2rem 0.1rem;
            box-sizing: border-box;
            border-radius: 4px 4px 0 0;
        }
    }
    .choose {
        border: 1px solid @color;
        padding-bottom: 0.7rem;
        .choose-one {
            font-size: 0.3rem;
            border-bottom: 1px solid @color;
            > div:first-child {
                display: flex;
                justify-content: space-around;
                padding: 0.2rem 0;
                div {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    span,
                    input {
                        margin-right: 0.1rem;
                    }
                }
            }
            > .one-all-first {
                display: flex;
                justify-content: space-between;
                border-top: 1px solid @color;
                li:last-child {
                    border-right: 0;
                }
                li {
                    padding: 0.1rem 0;
                    text-align: center;
                    width: 20%;
                    border-right: 1px solid @color;
                    input {
                        width: 80%;
                        height: 0.5rem;
                        margin: 0;
                        font-size: 0.3rem;
                        padding: 0;
                    }
                }
            }
            > .one-all-second {
                display: none;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid @color;
                padding: 0.2rem 0;
                input {
                    margin: 0;
                    padding: 0;
                    font-size: 0.3rem;
                    height: 0.6rem;
                    width: 30%;
                }
            }
        }
        .choose-two {
            > div:first-child {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 0.3rem;
                padding: 0.2rem 0;
                border-bottom: 1px solid @color;
                > input {
                    margin: 0 0.1rem;
                }
            }
            .inputs {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid @color;
                box-sizing: border-box;
                li:last-child {
                    border-right: 0;
                }
                li {
                    border-right: 1px solid @color;
                    box-sizing: border-box;
                    > input {
                        width: 80%;
                        height: 0.5rem;
                        display: block;
                        font-size: 0.3rem;
                        margin: 0.2rem auto;
                        padding: 0;
                    }
                    p {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-wrap: wrap;
                        margin: 0.2rem 0 0 0;
                    }
                }
            }
        }
        .choose-three {
            ul {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                font-size: 0.3rem;
                padding: 0.2rem;
                box-sizing: border-box;
                border-bottom: 1px solid @color;
                li {
                    margin-right: 0.1rem;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    > div {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-right: 0.2rem;
                    }
                }
                input[type="number"] {
                    width: 2rem;
                    height: 0.5rem;
                    display: block;
                    font-size: 0.3rem;
                    padding: 0;
                    margin: 0;
                }
            }
        }
        .choose-four {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            align-items: center;
            font-size: 0.3rem;
            border-bottom: 1px solid @color;
            padding: 0.2rem 0.1rem;
            box-sizing: border-box;
            > div {
                width: 50%;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
        }
        .choose-five {
            font-size: 0.3rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            padding: 0.2rem 0.2rem;
            box-sizing: border-box;
            border-bottom: 1px solid @color;
            input[type="checkbox"],
            span {
                margin-right: 0.2rem;
            }
            input[type="number"] {
                width: 2rem;
                height: 0.5rem;
                display: block;
                font-size: 0.3rem;
                padding: 0;
                margin: 0 0.2rem 0.2rem 0;
            }
        }
        .choose-six {
            padding: 0.2rem;
            box-sizing: border-box;
            font-size: 0.3rem;
            input[type="checkbox"],
            span {
                margin-right: 0.2rem;
            }
        }
    }
    .btnType {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-top: 0.2rem;
        > button {
            width: 40%;
        }
    }
    .number-title {
        background-color: @color;
        padding: 10px;
        box-sizing: border-box;
        color: #fff;
        font-size: 0.3rem;
        margin-top: 0.3rem;
        margin-bottom: 0;
    }
    .announce-result {
        width: 100%;
        max-height: 200px;
        overflow-y: scroll;
        font-size: 16px;
        display: flex;
        flex-wrap: wrap;
    }
}
.amount {
    font-size: 16px;
}
.close {
    text-align: center;
    margin-top: 10vh;
    font-size: 30px;
}

//状态
</style>
